<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let、const、模版字符串</title>
    <style>
        .item {
            width:100%;
            height:20px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 模板字符串 -->
    <script>
        var str = [1,2,3]
        // console.log(`${str} world`);
        // console.log(str + ' world');
        function fn() {
            return 'kkkk'
        }


        console.log(typeof str);
        // console.log(`${typeof str == 'string'? str: 0} world`);
        // console.log(`${typeof str == 'string'? str: 0} world`);
        console.log(`${str} world`);
        
        // let str = `
        //     <ul>
        //         <li>1</li>
        //         <li>2</li>
        //         <li>3</li>
        //         <li>4</li>
        //     </ul>
        // `;

        // console.log(str);

    </script>
    <!-- 解构 -->
    <script>
        // const NUM = 0;
        // console.log(NUM);
        // NUM = 1;

        // {
        //     const a = 1;
        // }
        // console.log(a);

        // const a = [1,2,3];
        // a[1] = 5;
        // console.log(a);


        // const a = [1,2,3,4];
        
        // let [one,two] = a;
        
        // console.log(one);
        // console.log(two);
        // console.log(three);
        // console.log(four);


        // const a = {
        //     name: '小洪',
        //     age: 30,
        //     fn: function () {
        //         console.log('函数名')
        //     }
        // }

        // a.name = '齐洪';
        // console.log(a);

        // const {name, age, fn} = a;
        
        // console.log(name);
        // console.log(age);
        // fn()


        
    </script>

    <script>
        // var items = document.getElementsByClassName('item');
        
        // for (let i=0; i<items.length; i++) {
        //     console.log(i, '<---');
        //     let i 
        //     items[i].onclick= function (){
        //         console.log('---');
        //         items[i].style.backgroundColor = 'red';
        //     }
        // }

        // window.i

        // {
        //     let i = 0;
        //     items[0].onclick = fucntion () {
        //         items[i].style.backgroundColor = 'red';
        //     }
        // }

        // {
        //     let i = 1;
        //     items[1].onclick= fucntion () {
        //         items[1].style.backgroundColor = 'red';

        //     }
        // }

        // {
        //     let i = 2;
        //     items[2].onclick= fucntion ({
        //         items[2].style.backgroundColor = 'red'
        //     })
        // }
    </script>

    <script>
        // var a = 1;
        // var a = 2;

        // console.log(a, '<--a');

        // let b = 1;
        // let b = 2;
        // console.log(b, '<--b');

        // {
        //     var a = 1;
        // }

        // {
        //     let b = 2;
        // }

        // console.log(a, '<--');
        // console.log(b, '<--b');

        // var a;
        // console.log(a);
        // a = 1;
        // console.log(a);
        // let b = 2;
        // console.log(b);



        // {
        //     let a = '1111'
        //     function fn() {
        //         console.log(a);
        //     }

        //     fn()
        // }

        // {
        //     var b = '1111'
        //     function fn() {
        //         console.log(b);
        //     }

        //     fn()
        // }



        
    </script>
</body>
</html>